<template>
  <div>
    <NavBar class="wtcol">
      <template #left>
        <img
          @click="handleBackIconClick"
          src="/images/icon/back.svg"
          alt=""
        />
      </template>
      <template #right>
        <img src="/images/icon/details.svg" alt="" />
      </template>
    </NavBar>

    <CellGroup>
      <div class="fix-navbar-overlay">
        <Cell>
          <div class="dis">
            <div class="flex">
              <img
                class="avator"
                src="/images/mock/avator.png"
                alt=""
              />
            </div>
            <div class="default">
              <span>一枝梨花</span>
              <span>昵称: 一枝梨花</span>
              <span>微信号：zzssef2345677</span>
              <span>地区：江苏 无锡</span>
            </div>
          </div>
        </Cell>
        <Cell>
          设置备注和标签
          <template #right>
            <img src="/images/icon/link.svg" alt="" />
          </template>
        </Cell>
        <Cell>
          朋友权限
          <template #right>
            <img src="/images/icon/link.svg" alt="" />
          </template>
        </Cell>
        <Cell>
          电话号码 <span id="phone">13398767888</span>
          <template #right>
            <img src="/images/icon/link.svg" alt="" />
          </template>
        </Cell>
      </div>
    </CellGroup>
    <CellGroup>
      <Cell id="pyq">
        <sapn>朋友圈</sapn>
        <div id="cw">
          <img
            src="/images/icon/moment1.svg"
            alt=""
            id="im1"
          />
          <img
            src="/images/icon/moment2.svg"
            alt=""
            id="im2"
          />
          <img src="/images/icon/moment3.svg" alt="" />
        </div>
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
      <Cell>
        更多信息
        <template #right>
          <img src="/images/icon/link.svg" alt="" />
        </template>
      </Cell>
    </CellGroup>

    <CellGroup id="blue">
      <Cell>
        <img
          class="cen"
          src="/images/icon/message.svg"
          alt=""
        />
        发消息
      </Cell>
      <Cell>
        <img
          class="cen"
          src="/images/icon/call.svg"
          alt=""
        />
        音视频通话
      </Cell>
    </CellGroup>
  </div>
</template>

<script>
import NavBar from "src/components/NavBar.vue"
import Cell from "src/components/Cell.vue"
import CellGroup from "src/components/CellGroup.vue"
export default {
  components: {
    NavBar,
    Cell,
    CellGroup,
  },
  methods: {
    handleBackIconClick() {
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="scss" scoped>
#blue {
  color: #003399;
}
.wtcol {
  background-color: #fff;
}
.flex {
  padding: 15px 20px 0 20px;
}
.avator {
  width: 58px;
  height: 58px;
  border-radius: 5px;
  // margin: 10px;
}
.dis {
  margin-top: -5px;
  margin-left: -150px;
  display: flex;
  padding-bottom: 23px;
  background-color: #fff;
}
.default {
  display: flex;
  flex-direction: column;
  height: 100px;

  & > span:first-child {
    margin-top: 14px;
    font-weight: 700;
    font-size: 18px;
    color: #000;
  }

  & > span {
    font-size: 13px;
    color: $font-color;
    margin-top: 2px;
  }
}
#cw {
  display: inline-block;
  vertical-align: middle;
  height: 42px;
}
#cw img:nth-child(1) {
  margin-left: 27px;
}
#cw img:nth-child(2) {
  margin: 0 7px;
}
.cen {
  vertical-align: middle;
}
#phone {
  font-size: 15px;
  font-weight: 400;
  margin-left: 10px;
}
</style>
